<template>
  <div
    class="slot-select"
    :class="[
      props.isErroByVariable ? 'erro-style' : '',
      props.disabled ? 'slot-select-diabled' : '',
    ]"
    @click="handleOpen()"
  >
    <span
      class="slot-select-con"
      :class="[!props.value ? 'con-placeholder' : '']"
      v-if="!props.isMultiple"
      >{{ props.value || props.placeholder }}</span
    >
    <div class="tag-box" v-else>
      <span
        v-if="!props.value || props.value.length === 0"
        class="slot-select-con con-placeholder"
        >{{ props.placeholder }}</span
      >
      <a-tag closable @close="handleDel(index)" v-for="(item, index) in props.value" :key="index">{{
        item[props.labelName]
      }}</a-tag>
    </div>

    <span class="icon-style"><down-outlined /></span>
  </div>
  <modelByTable
    @register="registerByTable"
    @check-address="handleCheckAddress"
    :title="props.title"
    :isMultiple="props.isMultiple"
    :driveId="props.driveId"
  />
</template>

<script setup lang="ts">
  import modelByTable from '/@/components/selectAddress/modelByTable.vue';
  import { useModal } from '/@/components/Modal';
  import { Tag } from 'ant-design-vue';
  import { DownOutlined } from '@ant-design/icons-vue';
  import { watch, reactive } from 'vue';
  let ATag = Tag;
  const props = defineProps({
    disabled: {
      type: Boolean,
      default: false,
    },
    labelName: {
      type: String,
      default: 'FullName',
    },
    driveId: String,
    title: {
      type: String,
      default: '选择地址',
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
    value: [String, Array],
    isErroByVariable: {
      type: Boolean,
      default: false,
    },
    isMultiple: {
      type: Boolean,
      default: false,
    },
  });
  let tagList = reactive([]);
  watch(
    () => props.value,
    () => {
      if (!props.isMultiple || !props.value) {
        return;
      }
      tagList = JSON.parse(JSON.stringify(props.value));
    },
    { immediate: true },
  );

  const emit = defineEmits(['checkAddress']);
  const [registerByTable, { openModal: openModalByTable, closeModal: closeModalByTable }] =
    useModal();
  function handleCheckAddress(val) {
    emit('checkAddress', { val });
    closeModalByTable();
  }
  function handleDel(index) {
    let list = tagList.filter((_item, i) => i !== index);
    emit('checkAddress', { val: list });
  }
  function handleOpen() {
    if (!props.disabled) openModalByTable();
  }
</script>

<style lang="less" scoped>
  .slot-select {
    width: 100%;
    min-height: 32px;
    padding: 4px 11px;
    box-sizing: border-box;
    display: flex;
    position: relative;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    align-items: center;
    cursor: pointer;
  }

  .slot-select:hover {
    border: 1px solid #1e80ff;
  }

  .slot-select-con {
    margin-right: 18px;
    // line-height: 30px;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000000d9;
    font-size: 14px;
  }

  .tag-box {
    flex: 1;
  }

  .con-placeholder {
    color: #bfbfbf;
  }

  .icon-style {
    // line-height: 30px;
    font-size: 11px;

    color: #bfbfbf;
  }

  .erro-style {
    border: 1px solid #ed6f6f !important;
  }

  .slot-select-diabled {
    background: #f5f5f5;
    cursor: not-allowed;

    .slot-select-con {
      color: rgba(0, 0, 0, 0.25);
    }
  }

  .slot-select-diabled:hover {
    border: 1px solid #d9d9d9;
  }
</style>
